<template>
  <div class="my_container" style="height: calc(100% - 53px)">
    <QrReaderComponent v-if="showScanner" @scan="scanDone" @cancle="showScanner = false" style="height: 100%"></QrReaderComponent>
    <div v-else style="height: calc(100%)">
      <van-cell-group>
        <van-cell title="工程单号" :value="order?.OrderCode" />
        <van-cell title="生产单号" :value="order?.SubOrderCode" />
        <van-cell title="部件号" :value="order?.ProductName" />
        <van-cell title="库位号" clickable :value="place._v2" is-link @click="to_place" />
        <van-field name="stepper" label="数量">
          <template #input>
            <van-stepper v-model="qty" :max="order?.Qty" />
          </template>
        </van-field>
      </van-cell-group>
      <van-search class="aways_bottom" v-model="keyword" placeholder="请输入搜索关键词" show-action @search="onSearch">
        <template #left-icon>
          <van-icon size="30" name="scan" @click="showScanner = true" />
        </template>
        <template #action>
          <van-button icon="upgrade" :disabled="!order.OrderCode || !place._k" type="primary" @click="submit">提交</van-button>
        </template>
      </van-search>
    </div>
    <van-overlay :show="loading">
      <div class="loading_wrapper"><van-loading type="spinner" size="24" /></div
    ></van-overlay>
  </div>
</template>
<script lang="ts" setup name="stockin">
import { searchBySubCode } from '@/api/order';
import { stockIn } from '@/api/stock';
import type { KvModel } from '@/model/kvmodel';
import type { OrderModel } from '@/model/ordermodel';
import router from '@/router';
import { ref, onActivated } from 'vue';
import { showSuccessToast } from 'vant';
import QrReaderComponent from '@/component/QrReaderComponent.vue';
import { error, success } from '@/utils/navigatorUtil';
const showScanner = ref(false);
const loading = ref(false);
const keyword = ref('');
const place = ref<KvModel>({});
const order = ref<OrderModel>({});
const qty = ref(0);

window.addEventListener(
  'popstate',
  function (e) {
    if (showScanner.value) {
      showScanner.value = false;
    }
  },
  false
);
const scanDone = (text: string) => {
  showScanner.value = false;
  success();
  showSuccessToast('条码读取成功');
  keyword.value = text;
  onSearch();
};

const onSearch = () => {
  const kw = keyword.value;
  keyword.value = '';
  loading.value = true;
  searchBySubCode({ code: kw })
    .then((r) => {
      order.value = r.Data![0];
      qty.value = r.Data![0].Qty!;
      loading.value = false;
    })
    .catch((e) => {
      error();
      loading.value = false;
    });
};
const init_val = () => {
  order.value = {};
  qty.value = 1;
  place.value = {};
};
onActivated(() => {
  const r = router.currentRoute.value;
  const place_json = r.query.place?.toString();
  if (place_json) {
    place.value = JSON.parse(place_json);
  } else {
    init_val();
  }
});
const to_place = () => {
  router.replace({ path: '/placelist', query: { place: place.value._k } });
};
const submit = () => {
  loading.value = true;
  stockIn({ place_id: place.value._k!, qty: qty.value, sub_order_code: order.value.SubOrderCode! })
    .then((r) => {
      init_val();
      showSuccessToast('操作成功');
      success();
      loading.value = false;
    })
    .catch((e) => {
      error();
      loading.value = false;
    });
};
const beforeBack = () => {
  if (showScanner.value) {
    showScanner.value = false;
  }
};
defineExpose({ beforeBack });
</script>
<style scoped>
.aways_bottom {
  width: calc(100% - 30px);
  position: fixed;
  bottom: 15px;
}
</style>
